// 用于处理1px问题  5-1-21
// 参考： https://github.com/ant-design/ant-design-mobile/blob/master/components/grid/style/index.less
// 原理： 伪元素 + transform 缩放
//       伪元素::after或::before是独立于当前元素，可以单独对其缩放而不影响元素本身的缩放
@mixin scale-hairline-common($color, $top, $right, $bottom, $left) {
  content         : '';
  position        : absolute;
  display         : block;
  z-index         : 1;
  top             : $top;
  right           : $right;
  bottom          : $bottom;
  left            : $left;
  background-color: $color;
}

//功能：根据具体参数生成指定的1px线条或边框。 5-1-21
@mixin hairline($direction, $color: #000, $radius: 0) {
  @if $direction==top {
    border-top: 1px solid $color;

    // min-resolution 用来检测设备的最小像素密度
    @media (min-resolution: 2dppx) {
      border-top: none;

      &::before {
        @include scale-hairline-common($color, 0, auto, auto, 0);
        width           : 100%;
        height          : 1px;
        transform-origin: 50% 50%;
        transform       : scaleY(0.5);

        @media (min-resolution: 3dppx) {
          transform: scaleY(0.33);
        }
      }
    }
  }

  @else if $direction==right {
    border-right: 1px solid $color;

    @media (min-resolution: 2dppx) {
      border-right: none;

      &::after {
        @include scale-hairline-common($color, 0, 0, auto, auto);
        width           : 1px;
        height          : 100%;
        background      : $color;
        transform-origin: 100% 50%;
        transform       : scaleX(0.5);

        @media (min-resolution: 3dppx) {
          transform: scaleX(0.33);
        }
      }
    }
  }

  @else if $direction==bottom {
    border-bottom: 1px solid $color;

    @media (min-resolution: 2dppx) {
      border-bottom: none;

      &::after {
        @include scale-hairline-common($color, auto, auto, 0, 0);
        width           : 100%;
        height          : 1px;
        transform-origin: 50% 100%;
        transform       : scaleY(0.5);

        @media (min-resolution: 3dppx) {
          transform: scaleY(0.33);
        }
      }
    }
  }

  @else if $direction==left {
    border-left: 1px solid $color;

    @media (min-resolution: 2dppx) {
      border-left: none;

      &::before {
        @include scale-hairline-common($color, 0, auto, auto, 0);
        width           : 1px;
        height          : 100%;
        transform-origin: 100% 50%;
        transform       : scaleX(0.5);

        @media (min-resolution: 3dppx) {
          transform: scaleX(0.33);
        }
      }
    }
  }

  @else if $direction==all {
    border       : 1px solid $color;
    border-radius: $radius;

    @media (min-resolution: 2dppx) {
      position: relative;
      border  : none;

      &::before {
        content         : '';
        position        : absolute;
        left            : 0;
        top             : 0;
        width           : 200%;
        height          : 200%;
        border          : 1px solid $color;
        border-radius   : $radius * 2;
        transform-origin: 0 0;
        transform       : scale(0.5);
        box-sizing      : border-box;
        pointer-events  : none;
      }
    }
  }
}

//功能：把利用hairline()生成的边框移除掉(既可以全部移除，也可以只移除一部分)。 5-1-21
@mixin hairline-remove($position: all) {
  @if $position==left {
    border-left: 0;

    &::before {
      display: none !important;
    }
  }

  @else if $position==right {
    border-right: 0;

    &::after {
      display: none !important;
    }
  }

  @else if $position==top {
    border-top: 0;

    &::before {
      display: none !important;
    }
  }

  @else if $position==bottom {
    border-bottom: 0;

    &::after {
      display: none !important;
    }
  }

  @else if $position==all {
    border: 0;

    &::before {
      display: none !important;
    }

    &::after {
      display: none !important;
    }
  }
}
